window.onload = function() {


  if(document.querySelector('.imgindex-header')) {
    // var dev = /http:\/\/localhost/.test(window.location.href);
    var dev = true;
    if(dev) {
      // 开发环境
      $.ajax({
        url: 'virtualdatas/imgtoutiao.json',
        dataType: 'json',
        success: function (json) {
          console.log(json);

          let oParent = $('.headerline-imgs-slide');
          let anchor = $('.headerline-imgs-anchor');
          for(let i = 0; i < json.length; i++) {
            let ele1 = $('<a class="img-item" href="imgdisplay.html?imgid='+json[i].id+'"><img src="'+json[i].imgSrc+'" alt="头条图片"><p class="img-description">'+json[i].title+'</p></a>');
            let ele2 = $('<a href="imgdisplay.html?imgid='+json[i].id+'" class="img-anchor active"><img src="'+json[i].imgSrc+'" alt="略缩图"></a>');

            oParent.append(ele1);
            anchor.append(ele2);
          }
          // 加载图片滚动函数
          imgIndexSlide();
        },
        error: function (err) {
          console.log(err);
        }
      })
    } else {
      // 正式环境
    }
  }

};

function imgIndexSlide() {
  let oTarget = document.querySelector('.headerline-imgs-slide');
  let aBtn = document.querySelectorAll('.img-anchor');
  let cur = 0;
  let autoPlay = true;

  for (let i = 0; i < aBtn.length; i++) {
    aBtn[i].onmouseenter = function() {
      go(i);
      cur = i;
      // autoPlay = false;
    };
    aBtn[i].onmouseleave = function() {
      // autoPlay = true;
    }
  }

  let oParent = document.querySelector('.imgindex-header');

  oParent.onmouseenter = function() {
    autoPlay = false;
  };
  oParent.onmouseleave = function() {
    autoPlay = true;
  }

  setInterval(() => {
    if (autoPlay) {
      if (cur == aBtn.length) {
        cur = 0;
      }
      go(cur);
      cur++;
    }
  }, 4000);

  function go(index) {
    for (let i = 0; i < aBtn.length; i++) {
      removeClass(aBtn[i], 'active');
    }
    startMove(oTarget, { left: -820 * index });
    addClass(aBtn[index], 'active');
  }
}

// 取样式
function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name];
  } else {
    return getComputedStyle(obj, false)[name];
  }
}

// 运动框架
function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);

  obj.timer = setInterval(() => {
    let bStop = true; // 假设所有值都到了
    for (let attr in json) {
      let cur = 0;
      cur = parseInt(getStyle(obj, attr));
      let speed = (json[attr] - cur) / 6;

      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

      if (cur != json[attr]) {
        bStop = false;
      }

      obj.style[attr] = cur + speed + 'px';
    }

    if (bStop) {
      clearInterval(obj.timer);

      if (fnEnd) {
        fnEnd();
      }
    }
  }, 30)
}

function addClass(obj, newClass) {
  var oldClass = obj.className;
  if (oldClass) {
    obj.className = oldClass + ' ' + newClass;
  } else {
    obj.className = newClass;
  }
}

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(elt /*, from*/ ) {
    var len = this.length >>> 0;
    var from = Number(arguments[1]) || 0;
    from = (from < 0) ?
      Math.ceil(from) :
      Math.floor(from);
    if (from < 0)
      from += len;
    for (; from < len; from++) {
      if (from in this &&
        this[from] === elt)
        return from;
    }
    return -1;
  };
}

function removeClass(obj, dClass) {
  let arr = [];
  let darr = [];
  arr = obj.className.split(' ');
  darr = dClass.split(' ');
  for (let i = 0; i < darr.length; i++) {
    if (arr.indexOf(darr[i]) != '-1') {
      let n = arr.indexOf(darr[i]);
      arr.splice(n, 1);
    }
  }
  obj.className = arr.join(' ');
}
